ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಮೂಲಕ ಅತ್ಯುತ್ತಮ ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ರಹಸ್ಯಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ವೇಗವಾದ, ಸುಗಮ ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕಾಗಿ ನಿರ್ಣಾಯಕ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು, ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ಬಳಸಿಕೊಳ್ಳಲು ಕಲಿಯಿರಿ.
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್: ಮೆಟ್ರಿಕ್ಸ್ ಸಂಗ್ರಹಕ್ಕಾಗಿ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ
ಇಂದಿನ ವೇಗದ ಡಿಜಿಟಲ್ ಜಗತ್ತಿನಲ್ಲಿ, ವೆಬ್ಸೈಟ್ನ ಕಾರ್ಯಕ್ಷಮತೆ ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ಬಳಕೆದಾರರು ವೆಬ್ಸೈಟ್ಗಳು ವೇಗವಾಗಿ ಲೋಡ್ ಆಗಬೇಕೆಂದು ಮತ್ತು ತಕ್ಷಣವೇ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸುತ್ತಾರೆ. ನಿಧಾನವಾದ ವೆಬ್ಸೈಟ್ ನಿರಾಶೆ, ಸೆಷನ್ಗಳನ್ನು ತ್ಯಜಿಸಲು ಮತ್ತು ಅಂತಿಮವಾಗಿ ಆದಾಯ ನಷ್ಟಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ಅದೃಷ್ಟವಶಾತ್, ಆಧುನಿಕ ವೆಬ್ ಬ್ರೌಸರ್ಗಳು ವೆಬ್ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯಲು ಮತ್ತು ವಿಶ್ಲೇಷಿಸಲು ಪ್ರಬಲ ಸಾಧನಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಈ ಉಪಕರಣಗಳಲ್ಲಿ ಅತ್ಯಂತ ಮೌಲ್ಯಯುತವಾದದ್ದು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಅನ್ನು ವಿವರವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತದೆ. ಇದರಲ್ಲಿ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳಿಂದ ಹಿಡಿದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಮತ್ತು ವಿಶ್ಲೇಷಿಸಲು ಮುಂದುವರಿದ ತಂತ್ರಗಳವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಒಳಗೊಂಡಿದೆ. ನಾವು ವಿವಿಧ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತೇವೆ, API ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸುವುದು ಹೇಗೆಂದು ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಸಹಾಯ ಮಾಡುವ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಒದಗಿಸುತ್ತೇವೆ.
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಎಂದರೇನು?
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಎಂಬುದು ಬ್ರೌಸರ್ನಿಂದ ಸಂಗ್ರಹಿಸಲಾದ ಕಾರ್ಯಕ್ಷಮತೆ-ಸಂಬಂಧಿತ ಡೇಟಾಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಟರ್ಫೇಸ್ಗಳ ಒಂದು ಗುಂಪಾಗಿದೆ. ಇದು ಡೆವಲಪರ್ಗಳಿಗೆ ವೆಬ್ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ವಿವಿಧ ಅಂಶಗಳನ್ನು ಅಳೆಯಲು ಅನುಮತಿಸುತ್ತದೆ, ಅವುಗಳೆಂದರೆ:
- ಪುಟ ಲೋಡ್ ಸಮಯ
- ಸಂಪನ್ಮೂಲ ಲೋಡಿಂಗ್ ಸಮಯ (ಚಿತ್ರಗಳು, ಸ್ಕ್ರಿಪ್ಟ್ಗಳು, ಸ್ಟೈಲ್ಶೀಟ್ಗಳು)
- ಬಳಕೆದಾರರ ಟೈಮಿಂಗ್ ಮಾಪನಗಳು
- ಫ್ರೇಮ್ ದರ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆ
- ಮೆಮೊರಿ ಬಳಕೆ
ಈ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಿ ವಿಶ್ಲೇಷಿಸುವುದರ ಮೂಲಕ, ಡೆವಲಪರ್ಗಳು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಬಹುದು ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಆಪ್ಟಿಮೈಸೇಶನ್ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು. ಈ API ಕಾರ್ಯಕ್ಷಮತೆ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಲು ಒಂದು ಪ್ರಮಾಣಿತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮಾನಿಟರಿಂಗ್ ಪರಿಕರಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಸುಲಭವಾಗುತ್ತದೆ.
ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಇಂಟರ್ಫೇಸ್ಗಳು
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಕೆಲವು ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಇಂಟರ್ಫೇಸ್ಗಳ ಸುತ್ತ ಸುತ್ತುತ್ತದೆ:
- ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್: ಒಂದು ವೆಬ್ಪುಟದ ಜೀವಿತಾವಧಿಯಲ್ಲಿ ಸಂಭವಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಘಟನೆಗಳ ಟೈಮ್ಲೈನ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಲು ಕೇಂದ್ರ ಬಿಂದುವಾಗಿದೆ.
- ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿ: ಒಂದು ಸಂಪನ್ಮೂಲ ಲೋಡಿಂಗ್ ಈವೆಂಟ್ ಅಥವಾ ಬಳಕೆದಾರ-ವ್ಯಾಖ್ಯಾನಿತ ಟೈಮಿಂಗ್ ಮಾಪನದಂತಹ ಒಂದೇ ಕಾರ್ಯಕ್ಷಮತೆಯ ಘಟನೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
- ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್: ಡೆವಲಪರ್ಗಳಿಗೆ ಹೊಸ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿಗಳಿಗಾಗಿ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮತ್ತು ನೈಜ-ಸಮಯದಲ್ಲಿ ಅವುಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
- `performance` ಆಬ್ಜೆಕ್ಟ್: ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ ಮತ್ತು ಸಂಬಂಧಿತ ವಿಧಾನಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುವ ಗ್ಲೋಬಲ್ ಆಬ್ಜೆಕ್ಟ್ (`window.performance`).
`performance` ಆಬ್ಜೆಕ್ಟ್
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು `performance` ಆಬ್ಜೆಕ್ಟ್ ಆರಂಭಿಕ ಹಂತವಾಗಿದೆ. ಇದು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿಗಳನ್ನು ಹಿಂಪಡೆಯಲು, ಟೈಮ್ಲೈನ್ ಅನ್ನು ತೆರವುಗೊಳಿಸಲು ಮತ್ತು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ಗಳನ್ನು ರಚಿಸಲು ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಕೆಲವು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ವಿಧಾನಗಳು ಹೀಗಿವೆ:
- `performance.getEntries()`: ಟೈಮ್ಲೈನ್ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿಗಳ ಒಂದು ಶ್ರೇಣಿಯನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ.
- `performance.getEntriesByName(name, entryType)`: ನಿರ್ದಿಷ್ಟ ಹೆಸರು ಮತ್ತು ಎಂಟ್ರಿ ಪ್ರಕಾರದೊಂದಿಗೆ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿಗಳ ಒಂದು ಶ್ರೇಣಿಯನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ.
- `performance.getEntriesByType(entryType)`: ನಿರ್ದಿಷ್ಟ ಪ್ರಕಾರದ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿಗಳ ಒಂದು ಶ್ರೇಣಿಯನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ.
- `performance.clearMarks(markName)`: ನಿರ್ದಿಷ್ಟ ಹೆಸರಿನೊಂದಿಗೆ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಮಾರ್ಕ್ಗಳನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ.
- `performance.clearMeasures(measureName)`: ನಿರ್ದಿಷ್ಟ ಹೆಸರಿನೊಂದಿಗೆ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಮೆಷರ್ಗಳನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ.
- `performance.now()`: ನ್ಯಾವಿಗೇಷನ್ ಪ್ರಾರಂಭದಿಂದ ಕಳೆದ ಸಮಯವನ್ನು ಪ್ರತಿನಿಧಿಸುವ, ಸಾಮಾನ್ಯವಾಗಿ ಮಿಲಿಸೆಕೆಂಡುಗಳಲ್ಲಿ ಹೆಚ್ಚಿನ-ರೆಸಲ್ಯೂಶನ್ ಟೈಮ್ಸ್ಟ್ಯಾಂಪ್ ಅನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ. ಅವಧಿಗಳನ್ನು ಅಳೆಯಲು ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳು
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಹಲವಾರು ವಿಧದ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಪ್ರತಿಯೊಂದೂ ನಿರ್ದಿಷ್ಟ ರೀತಿಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಘಟನೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಕೆಲವು ಪ್ರಮುಖ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳು ಹೀಗಿವೆ:
- `navigation`: DNS ಲುಕಪ್, TCP ಸಂಪರ್ಕ, ವಿನಂತಿ, ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆ ಸಮಯಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಪುಟ ಲೋಡ್ಗಾಗಿ ನ್ಯಾವಿಗೇಷನ್ ಟೈಮಿಂಗ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
- `resource`: ಚಿತ್ರ, ಸ್ಕ್ರಿಪ್ಟ್, ಅಥವಾ ಸ್ಟೈಲ್ಶೀಟ್ನಂತಹ ನಿರ್ದಿಷ್ಟ ಸಂಪನ್ಮೂಲದ ಲೋಡಿಂಗ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
- `mark`: ಟೈಮ್ಲೈನ್ನಲ್ಲಿ ಬಳಕೆದಾರ-ವ್ಯಾಖ್ಯಾನಿತ ಟೈಮ್ಸ್ಟ್ಯಾಂಪ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
- `measure`: ಎರಡು ಮಾರ್ಕ್ಗಳ ನಡುವೆ ಲೆಕ್ಕ ಹಾಕಿದ ಟೈಮ್ಲೈನ್ನಲ್ಲಿ ಬಳಕೆದಾರ-ವ್ಯಾಖ್ಯಾನಿತ ಅವಧಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
- `paint`: ಬ್ರೌಸರ್ಗೆ ಪರದೆಯ ಮೇಲೆ ಮೊದಲ ವಿಷಯವನ್ನು ಪೇಂಟ್ ಮಾಡಲು (ಫರ್ಸ್ಟ್ ಪೇಂಟ್) ಮತ್ತು ಮೊದಲ ಅರ್ಥಪೂರ್ಣ ವಿಷಯವನ್ನು (ಫರ್ಸ್ಟ್ ಕಂಟೆಂಟ್ಫುಲ್ ಪೇಂಟ್) ಪೇಂಟ್ ಮಾಡಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
- `longtask`: ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ದೀರ್ಘಕಾಲದವರೆಗೆ (ಸಾಮಾನ್ಯವಾಗಿ 50ms ಗಿಂತ ಹೆಚ್ಚು) ನಿರ್ಬಂಧಿಸುವ ಕಾರ್ಯಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಇದು UI ಜ್ಯಾಂಕ್ಗೆ ಕಾರಣವಾಗಬಹುದು.
- `event`: ಮೌಸ್ ಕ್ಲಿಕ್ ಅಥವಾ ಕೀ ಪ್ರೆಸ್ನಂತಹ ಬ್ರೌಸರ್ ಈವೆಂಟ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
- `layout-shift`: ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಅಡ್ಡಿಪಡಿಸಬಹುದಾದ ಪುಟ ಲೇಔಟ್ನಲ್ಲಿನ ಅನಿರೀಕ್ಷಿತ ಬದಲಾವಣೆಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಕ್ಯುಮುಲೇಟಿವ್ ಲೇಔಟ್ ಶಿಫ್ಟ್).
- `largest-contentful-paint`: ವ್ಯೂಪೋರ್ಟ್ನಲ್ಲಿನ ಅತಿದೊಡ್ಡ ವಿಷಯ ಅಂಶವು ಗೋಚರಿಸಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸುವುದು
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಬಳಸಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಹಲವಾರು ಮಾರ್ಗಗಳಿವೆ. ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ವಿಧಾನಗಳು ಹೀಗಿವೆ:
- ಟೈಮ್ಲೈನ್ನಿಂದ ನೇರವಾಗಿ ಎಂಟ್ರಿಗಳನ್ನು ಹಿಂಪಡೆಯುವುದು: ನಿರ್ದಿಷ್ಟ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿಗಳನ್ನು ಹಿಂಪಡೆಯಲು `performance.getEntries()`, `performance.getEntriesByName()`, ಅಥವಾ `performance.getEntriesByType()` ಬಳಸುವುದು.
- ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಬಳಸುವುದು: ಹೊಸ ಎಂಟ್ರಿಗಳಿಗಾಗಿ ಟೈಮ್ಲೈನ್ ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು ಮತ್ತು ನೈಜ-ಸಮಯದಲ್ಲಿ ಅವುಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದು.
ನೇರವಾಗಿ ಎಂಟ್ರಿಗಳನ್ನು ಹಿಂಪಡೆಯುವುದು
ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಸರಳವಾದ ಮಾರ್ಗವೆಂದರೆ ಟೈಮ್ಲೈನ್ನಿಂದ ನೇರವಾಗಿ ಎಂಟ್ರಿಗಳನ್ನು ಹಿಂಪಡೆಯುವುದು. ಪುಟ ಲೋಡ್ ಆದ ನಂತರ ಅಥವಾ ಬಳಕೆದಾರರು ನಿರ್ದಿಷ್ಟ ಅಂಶದೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿದ ನಂತರದಂತಹ ನಿರ್ದಿಷ್ಟ ಘಟನೆಯ ನಂತರ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
ಟೈಮ್ಲೈನ್ನಿಂದ ಎಲ್ಲಾ ಸಂಪನ್ಮೂಲ ಎಂಟ್ರಿಗಳನ್ನು ಹೇಗೆ ಹಿಂಪಡೆಯುವುದು ಎಂಬುದರ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
const resourceEntries = performance.getEntriesByType("resource");
resourceEntries.forEach(entry => {
console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});
ಈ ಕೋಡ್ "resource" ಪ್ರಕಾರದ ಎಲ್ಲಾ ಎಂಟ್ರಿಗಳನ್ನು ಹಿಂಪಡೆಯುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಸಂಪನ್ಮೂಲದ ಹೆಸರು ಮತ್ತು ಅವಧಿಯನ್ನು ಕನ್ಸೋಲ್ಗೆ ಲಾಗ್ ಮಾಡುತ್ತದೆ.
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಬಳಸುವುದು
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ನಿಮಗೆ ಹೊಸ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿಗಳಿಗಾಗಿ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮತ್ತು ನೈಜ-ಸಮಯದಲ್ಲಿ ಅವುಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಟೈಮ್ಲೈನ್ ಅನ್ನು ಪದೇ ಪದೇ ಪೋಲ್ ಮಾಡದೆಯೇ ಡೇಟಾ ಲಭ್ಯವಾದಾಗ ಅದನ್ನು ಸಂಗ್ರಹಿಸಲು ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
ಹೊಸ ಸಂಪನ್ಮೂಲ ಎಂಟ್ರಿಗಳಿಗಾಗಿ ಮಾನಿಟರ್ ಮಾಡಲು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದರ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
console.log(`Resource loaded: ${entry.name}, duration: ${entry.duration}ms`);
});
});
observer.observe({ entryTypes: ["resource"] });
ಈ ಕೋಡ್ "resource" ಪ್ರಕಾರದ ಹೊಸ ಎಂಟ್ರಿಗಳಿಗಾಗಿ ಕೇಳುವ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಟೈಮ್ಲೈನ್ಗೆ ಹೊಸ ಸಂಪನ್ಮೂಲ ಎಂಟ್ರಿ ಸೇರಿಸಿದಾಗ, ಅಬ್ಸರ್ವರ್ನ ಕಾಲ್ಬ್ಯಾಕ್ ಕಾರ್ಯವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ, ಸಂಪನ್ಮೂಲದ ಹೆಸರು ಮತ್ತು ಅವಧಿಯನ್ನು ಕನ್ಸೋಲ್ಗೆ ಲಾಗ್ ಮಾಡುತ್ತದೆ. `observer.observe()` ವಿಧಾನವು ಅಬ್ಸರ್ವರ್ ಯಾವ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
ಬಳಕೆದಾರರ ಟೈಮಿಂಗ್ ಅನ್ನು ಅಳೆಯುವುದು
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API `mark` ಮತ್ತು `measure` ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಸಹ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳು ಕಾರ್ಯಗತಗೊಳ್ಳಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಅಳೆಯಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ, ಉದಾಹರಣೆಗೆ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡುವುದು ಅಥವಾ ಬಳಕೆದಾರರ ಇನ್ಪುಟ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವುದು.
ಬಳಕೆದಾರರ ಟೈಮಿಂಗ್ ಅನ್ನು ಅಳೆಯಲು, ನೀವು ಅಳೆಯಲು ಬಯಸುವ ವಿಭಾಗದ ಪ್ರಾರಂಭ ಮತ್ತು ಅಂತ್ಯವನ್ನು ಗುರುತಿಸಲು ಮೊದಲು ಒಂದು `mark` ಅನ್ನು ರಚಿಸುತ್ತೀರಿ. ನಂತರ, ಎರಡು ಮಾರ್ಕ್ಗಳ ನಡುವಿನ ಅವಧಿಯನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ನೀವು ಒಂದು `measure` ಅನ್ನು ರಚಿಸುತ್ತೀರಿ.
ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಹೇಗೆ ಅಳೆಯುವುದು ಎಂಬುದರ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
performance.mark("component-render-start");
// Code to render the component
performance.mark("component-render-end");
performance.measure("component-render-time", "component-render-start", "component-render-end");
const measure = performance.getEntriesByName("component-render-time", "measure")[0];
console.log(`Component render time: ${measure.duration}ms`);
ಈ ಕೋಡ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವ ಕೋಡ್ನ ಮೊದಲು ಮತ್ತು ನಂತರ `component-render-start` ಮತ್ತು `component-render-end` ಎಂಬ ಎರಡು ಮಾರ್ಕ್ಗಳನ್ನು ರಚಿಸುತ್ತದೆ. ನಂತರ, ಇದು ಎರಡು ಮಾರ್ಕ್ಗಳ ನಡುವಿನ ಅವಧಿಯನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು `component-render-time` ಎಂಬ ಮೆಷರ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಅಂತಿಮವಾಗಿ, ಇದು ಟೈಮ್ಲೈನ್ನಿಂದ ಮೆಷರ್ ಎಂಟ್ರಿಯನ್ನು ಹಿಂಪಡೆಯುತ್ತದೆ ಮತ್ತು ಅವಧಿಯನ್ನು ಕನ್ಸೋಲ್ಗೆ ಲಾಗ್ ಮಾಡುತ್ತದೆ.
ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು
ಒಮ್ಮೆ ನೀವು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸಿದ ನಂತರ, ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಆಪ್ಟಿಮೈಸೇಶನ್ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನೀವು ಅವುಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಬೇಕಾಗುತ್ತದೆ. ಈ ಉದ್ದೇಶಕ್ಕಾಗಿ ನೀವು ಬಳಸಬಹುದಾದ ಹಲವಾರು ಪರಿಕರಗಳು ಮತ್ತು ತಂತ್ರಗಳಿವೆ:
- ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು: ಹೆಚ್ಚಿನ ಆಧುನಿಕ ವೆಬ್ ಬ್ರೌಸರ್ಗಳು ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ದೃಶ್ಯೀಕರಿಸಲು ಮತ್ತು ವಿಶ್ಲೇಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಅಂತರ್ನಿರ್ಮಿತ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಈ ಪರಿಕರಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಘಟನೆಗಳ ಟೈಮ್ಲೈನ್ ಅನ್ನು ತೋರಿಸುವ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಪ್ಯಾನೆಲ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ, ಜೊತೆಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಲು ಮತ್ತು ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಪರಿಕರಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ.
- ಕಾರ್ಯಕ್ಷಮತೆ ಮಾನಿಟರಿಂಗ್ ಪರಿಕರಗಳು: ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು, ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ದೃಶ್ಯೀಕರಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುವ ಅನೇಕ ಮೂರನೇ-ವ್ಯಕ್ತಿಯ ಕಾರ್ಯಕ್ಷಮತೆ ಮಾನಿಟರಿಂಗ್ ಪರಿಕರಗಳಿವೆ. ಈ ಪರಿಕರಗಳು ಸಾಮಾನ್ಯವಾಗಿ ನೈಜ-ಸಮಯದ ಮಾನಿಟರಿಂಗ್, ಅಸಂಗತತೆ ಪತ್ತೆ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ವರದಿ ಮಾಡುವಿಕೆಯಂತಹ ಸುಧಾರಿತ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗಳಲ್ಲಿ ನ್ಯೂ ರೆಲಿಕ್, ಡೇಟಾಡಾಗ್, ಮತ್ತು ಸೆಂಟ್ರಿ ಸೇರಿವೆ.
- ವೆಬ್ ವೈಟಲ್ಸ್: ಗೂಗಲ್ನ ವೆಬ್ ವೈಟಲ್ಸ್ ಉಪಕ್ರಮವು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಅಳೆಯಲು ಅತ್ಯಗತ್ಯವೆಂದು ಪರಿಗಣಿಸಲಾದ ಮೆಟ್ರಿಕ್ಸ್ಗಳ ಒಂದು ಗುಂಪನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ಮೆಟ್ರಿಕ್ಸ್ಗಳಲ್ಲಿ ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್ಫುಲ್ ಪೇಂಟ್ (LCP), ಫರ್ಸ್ಟ್ ಇನ್ಪುಟ್ ಡಿಲೇ (FID), ಮತ್ತು ಕ್ಯುಮುಲೇಟಿವ್ ಲೇಔಟ್ ಶಿಫ್ಟ್ (CLS) ಸೇರಿವೆ. ಈ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದರಿಂದ ಸಾಮಾನ್ಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಪರಿಹರಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸುವುದು
ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಮತ್ತು ಸುಲಭವಾಗಿ ಲಭ್ಯವಿರುವ ಸಂಪನ್ಮೂಲವಾಗಿದೆ. ಕ್ರೋಮ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳಲ್ಲಿ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಪ್ಯಾನೆಲ್ ಅನ್ನು ನೀವು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ (ಇತರ ಬ್ರೌಸರ್ಗಳು ಇದೇ ರೀತಿಯ ಕಾರ್ಯಗಳನ್ನು ಹೊಂದಿವೆ):
- ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ತೆರೆಯಿರಿ: ವೆಬ್ಪುಟದ ಮೇಲೆ ಬಲ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು "Inspect" ಆಯ್ಕೆಮಾಡಿ ಅಥವಾ F12 ಒತ್ತಿರಿ.
- ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಪ್ಯಾನೆಲ್ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿ: "Performance" ಟ್ಯಾಬ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ.
- ರೆಕಾರ್ಡಿಂಗ್ ಪ್ರಾರಂಭಿಸಿ: ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ಸೆರೆಹಿಡಿಯಲು ಪ್ರಾರಂಭಿಸಲು ರೆಕಾರ್ಡ್ ಬಟನ್ (ಸಾಮಾನ್ಯವಾಗಿ ಒಂದು ವೃತ್ತ) ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ.
- ಪುಟದೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿ: ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡುವುದು, ಬಟನ್ಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದು ಅಥವಾ ಸ್ಕ್ರೋಲ್ ಮಾಡುವಂತಹ ನೀವು ವಿಶ್ಲೇಷಿಸಲು ಬಯಸುವ ಕ್ರಿಯೆಗಳನ್ನು ನಿರ್ವಹಿಸಿ.
- ರೆಕಾರ್ಡಿಂಗ್ ನಿಲ್ಲಿಸಿ: ರೆಕಾರ್ಡಿಂಗ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಸ್ಟಾಪ್ ಬಟನ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ.
- ಟೈಮ್ಲೈನ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸಿ: ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಪ್ಯಾನೆಲ್ ಲೋಡಿಂಗ್ ಸಮಯಗಳು, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಶನ್, ರೆಂಡರಿಂಗ್, ಮತ್ತು ಪೇಂಟಿಂಗ್ ಸೇರಿದಂತೆ ಕಾರ್ಯಕ್ಷಮತೆಯ ಘಟನೆಗಳ ಟೈಮ್ಲೈನ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
ಟೈಮ್ಲೈನ್ ಪ್ರತಿ ಈವೆಂಟ್ ಬಗ್ಗೆ ಅದರ ಅವಧಿ, ಪ್ರಾರಂಭ ಸಮಯ, ಮತ್ತು ಇತರ ಈವೆಂಟ್ಗಳೊಂದಿಗಿನ ಸಂಬಂಧ ಸೇರಿದಂತೆ ವಿವರವಾದ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ನೀವು ಜೂಮ್ ಇನ್ ಮತ್ತು ಔಟ್ ಮಾಡಬಹುದು, ಪ್ರಕಾರದ ಮೂಲಕ ಈವೆಂಟ್ಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಬಹುದು, ಮತ್ತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿಯನ್ನು ಪಡೆಯಲು ವೈಯಕ್ತಿಕ ಈವೆಂಟ್ಗಳನ್ನು ಪರಿಶೀಲಿಸಬಹುದು. "Bottom-Up," "Call Tree," ಮತ್ತು "Event Log" ಟ್ಯಾಬ್ಗಳು ಡೇಟಾದ ಮೇಲೆ ವಿಭಿನ್ನ ದೃಷ್ಟಿಕೋನಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ, ಇದು ನಿಮಗೆ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ವೆಬ್ ವೈಟಲ್ಸ್: ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಅಳೆಯುವುದು
ವೆಬ್ ವೈಟಲ್ಸ್ ಎಂಬುದು ವೆಬ್ಸೈಟ್ನಲ್ಲಿನ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಅಳೆಯಲು ಗೂಗಲ್ ವ್ಯಾಖ್ಯಾನಿಸಿದ ಮೆಟ್ರಿಕ್ಸ್ಗಳ ಒಂದು ಗುಂಪಾಗಿದೆ. ಈ ಮೆಟ್ರಿಕ್ಸ್ಗಳ ಮೇಲೆ ಗಮನಹರಿಸುವುದರಿಂದ ಬಳಕೆದಾರರ ತೃಪ್ತಿ ಮತ್ತು ಎಸ್ಇಒ ಶ್ರೇಯಾಂಕವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು.
- ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್ಫುಲ್ ಪೇಂಟ್ (LCP): ವ್ಯೂಪೋರ್ಟ್ನಲ್ಲಿನ ಅತಿದೊಡ್ಡ ವಿಷಯ ಅಂಶವು ಗೋಚರಿಸಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಅಳೆಯುತ್ತದೆ. ಉತ್ತಮ LCP ಸ್ಕೋರ್ 2.5 ಸೆಕೆಂಡುಗಳು ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ.
- ಫರ್ಸ್ಟ್ ಇನ್ಪುಟ್ ಡಿಲೇ (FID): ಮೊದಲ ಬಳಕೆದಾರರ ಸಂವಹನಕ್ಕೆ (ಉದಾ., ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವುದು ಅಥವಾ ಲಿಂಕ್ ಟ್ಯಾಪ್ ಮಾಡುವುದು) ಬ್ರೌಸರ್ ಪ್ರತಿಕ್ರಿಯಿಸಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಅಳೆಯುತ್ತದೆ. ಉತ್ತಮ FID ಸ್ಕೋರ್ 100 ಮಿಲಿಸೆಕೆಂಡುಗಳು ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ.
- ಕ್ಯುಮುಲೇಟಿವ್ ಲೇಔಟ್ ಶಿಫ್ಟ್ (CLS): ಪುಟದಲ್ಲಿ ಸಂಭವಿಸುವ ಅನಿರೀಕ್ಷಿತ ಲೇಔಟ್ ಶಿಫ್ಟ್ಗಳ ಪ್ರಮಾಣವನ್ನು ಅಳೆಯುತ್ತದೆ. ಉತ್ತಮ CLS ಸ್ಕೋರ್ 0.1 ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ.
ನೀವು ವಿವಿಧ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ ವೆಬ್ ವೈಟಲ್ಸ್ ಅನ್ನು ಅಳೆಯಬಹುದು, ಅವುಗಳೆಂದರೆ:
- ಕ್ರೋಮ್ ಬಳಕೆದಾರರ ಅನುಭವ ವರದಿ (CrUX): ಅನಾಮಧೇಯ ಕ್ರೋಮ್ ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಆಧರಿಸಿ ವೆಬ್ಸೈಟ್ಗಳಿಗೆ ನೈಜ-ಪ್ರಪಂಚದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ಒದಗಿಸುತ್ತದೆ.
- ಲೈಟ್ಹೌಸ್: ವೆಬ್ ಪುಟಗಳ ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆ, ಮತ್ತು ಎಸ್ಇಒ ಅನ್ನು ಆಡಿಟ್ ಮಾಡುವ ಸ್ವಯಂಚಾಲಿತ ಸಾಧನ.
- ವೆಬ್ ವೈಟಲ್ಸ್ ವಿಸ್ತರಣೆ: ನೀವು ವೆಬ್ ಬ್ರೌಸ್ ಮಾಡುವಾಗ ನೈಜ-ಸಮಯದಲ್ಲಿ ವೆಬ್ ವೈಟಲ್ಸ್ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಕ್ರೋಮ್ ವಿಸ್ತರಣೆ.
- PerformanceObserver API: ಘಟನೆಗಳು ಸಂಭವಿಸಿದಂತೆ ಬ್ರೌಸರ್ನಿಂದ ನೇರವಾಗಿ ವೆಬ್ ವೈಟಲ್ಸ್ ಡೇಟಾವನ್ನು ಸೆರೆಹಿಡಿಯಿರಿ.
ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು
ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ನೀವು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಇಲ್ಲಿವೆ:
- ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಗುರುತಿಸುವುದು: ಲೋಡ್ ಆಗಲು ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತಿರುವ ಚಿತ್ರಗಳು, ಸ್ಕ್ರಿಪ್ಟ್ಗಳು ಮತ್ತು ಸ್ಟೈಲ್ಶೀಟ್ಗಳನ್ನು ಗುರುತಿಸಲು `resource` ಎಂಟ್ರಿ ಪ್ರಕಾರವನ್ನು ಬಳಸಿ. ಈ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸಂಕುಚಿತಗೊಳಿಸುವುದು, ಕಂಟೆಂಟ್ ಡೆಲಿವರಿ ನೆಟ್ವರ್ಕ್ (CDN) ಬಳಸುವುದು, ಅಥವಾ ಅವುಗಳನ್ನು ಲೇಜಿ-ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ. ಉದಾಹರಣೆಗೆ, Shopify, Magento ಅಥವಾ WooCommerce ನಂತಹ ಅನೇಕ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್ಫಾರ್ಮ್ಗಳು ಉತ್ಪನ್ನಗಳನ್ನು ಮಾರಾಟ ಮಾಡಲು ಚಿತ್ರಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿವೆ. ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ ಡೇಟಾವನ್ನು ಬಳಸಿ ಇಮೇಜ್ ಲೋಡಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದರಿಂದ ಗ್ರಾಹಕರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಮೊಬೈಲ್ ಬಳಕೆದಾರರಿಗೆ.
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಸಮಯವನ್ನು ಅಳೆಯುವುದು: ನಿರ್ದಿಷ್ಟ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಂಕ್ಷನ್ಗಳು ಕಾರ್ಯಗತಗೊಳ್ಳಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಅಳೆಯಲು `mark` ಮತ್ತು `measure` ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳನ್ನು ಬಳಸಿ. ನಿಧಾನವಾಗಿ ಚಲಿಸುವ ಫಂಕ್ಷನ್ಗಳನ್ನು ಗುರುತಿಸಿ ಮತ್ತು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಅಲ್ಗಾರಿದಮ್ಗಳನ್ನು ಬಳಸುವುದು, ಫಲಿತಾಂಶಗಳನ್ನು ಕ್ಯಾಶಿಂಗ್ ಮಾಡುವುದು, ಅಥವಾ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಅನ್ನು ನಂತರದ ಸಮಯಕ್ಕೆ ಮುಂದೂಡುವ ಮೂಲಕ ಅವುಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ.
- ಲಾಂಗ್ ಟಾಸ್ಕ್ಗಳನ್ನು ಪತ್ತೆ ಮಾಡುವುದು: ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ದೀರ್ಘಕಾಲದವರೆಗೆ ನಿರ್ಬಂಧಿಸುತ್ತಿರುವ ಕಾರ್ಯಗಳನ್ನು ಗುರುತಿಸಲು `longtask` ಎಂಟ್ರಿ ಪ್ರಕಾರವನ್ನು ಬಳಸಿ. ಈ ಕಾರ್ಯಗಳನ್ನು ಸಣ್ಣ ತುಂಡುಗಳಾಗಿ ವಿಭಜಿಸಿ ಅಥವಾ UI ಜ್ಯಾಂಕ್ ಅನ್ನು ತಡೆಯಲು ಅವುಗಳನ್ನು ಹಿನ್ನೆಲೆ ಥ್ರೆಡ್ಗೆ ಸರಿಸಿ.
- ಫರ್ಸ್ಟ್ ಕಂಟೆಂಟ್ಫುಲ್ ಪೇಂಟ್ (FCP) ಮತ್ತು ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್ಫುಲ್ ಪೇಂಟ್ (LCP) ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು: ಪರದೆಯ ಮೇಲೆ ಮೊದಲ ವಿಷಯ ಮತ್ತು ಅತಿದೊಡ್ಡ ವಿಷಯ ಕಾಣಿಸಿಕೊಳ್ಳಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು `paint` ಮತ್ತು `largest-contentful-paint` ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳನ್ನು ಬಳಸಿ. ಈ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ಸುಧಾರಿಸಲು ನಿರ್ಣಾಯಕ ರೆಂಡರಿಂಗ್ ಮಾರ್ಗವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ.
- ಕ್ಯುಮುಲೇಟಿವ್ ಲೇಔಟ್ ಶಿಫ್ಟ್ (CLS) ಅನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು: ಅನಿರೀಕ್ಷಿತ ಲೇಔಟ್ ಶಿಫ್ಟ್ಗಳಿಗೆ ಕಾರಣವಾಗುವ ಅಂಶಗಳನ್ನು ಗುರುತಿಸಲು `layout-shift` ಎಂಟ್ರಿ ಪ್ರಕಾರವನ್ನು ಬಳಸಿ. ಈ ಅಂಶಗಳಿಗಾಗಿ ಜಾಗವನ್ನು ಕಾಯ್ದಿರಿಸಿ ಅಥವಾ ಲೇಔಟ್ ಶಿಫ್ಟ್ಗಳಿಗೆ ಕಾರಣವಾಗದಂತೆ ಅವುಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು `transform` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ.
ಮುಂದುವರಿದ ತಂತ್ರಗಳು
ಒಮ್ಮೆ ನೀವು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ನ ಮೂಲಭೂತ ಅಂಶಗಳ ಬಗ್ಗೆ ದೃಢವಾದ ತಿಳುವಳಿಕೆಯನ್ನು ಹೊಂದಿದ್ದರೆ, ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮತ್ತಷ್ಟು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ನೀವು ಕೆಲವು ಮುಂದುವರಿದ ತಂತ್ರಗಳನ್ನು ಅನ್ವೇಷಿಸಬಹುದು:
- ನೈಜ ಬಳಕೆದಾರರ ಮಾನಿಟರಿಂಗ್ (RUM): ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೆಚ್ಚು ನಿಖರವಾದ ಚಿತ್ರವನ್ನು ಪಡೆಯಲು ಕ್ಷೇತ್ರದಿಂದ ನೈಜ ಬಳಕೆದಾರರಿಂದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಿ. RUM ಪರಿಕರವನ್ನು ಬಳಸಿ ಅಥವಾ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಬಳಸಿ ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ RUM ಪರಿಹಾರವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ. ಈ ಡೇಟಾವನ್ನು ನಂತರ ಪ್ರಾದೇಶಿಕ ಕಾರ್ಯಕ್ಷಮತೆಯ ವ್ಯತ್ಯಾಸಗಳನ್ನು ನಿರ್ಧರಿಸಲು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಯುಎಸ್ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲಾದ ವೆಬ್ಸೈಟ್ ನೆಟ್ವರ್ಕ್ ಲೇಟೆನ್ಸಿಯಿಂದಾಗಿ ಏಷ್ಯಾದಲ್ಲಿ ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗಬಹುದು.
- ಸಿಂಥೆಟಿಕ್ ಮಾನಿಟರಿಂಗ್: ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ಅನುಕರಿಸಲು ಮತ್ತು ನಿಯಂತ್ರಿತ ಪರಿಸರದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯಲು ಸಿಂಥೆಟಿಕ್ ಮಾನಿಟರಿಂಗ್ ಬಳಸಿ. ಇದು ನೈಜ ಬಳಕೆದಾರರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಮೊದಲು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
- ಸ್ವಯಂಚಾಲಿತ ಕಾರ್ಯಕ್ಷಮತೆ ಪರೀಕ್ಷೆ: ಕಾರ್ಯಕ್ಷಮತೆಯ ಹಿಂಜರಿತಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪತ್ತೆಹಚ್ಚಲು ನಿಮ್ಮ ನಿರಂತರ ಏಕೀಕರಣ/ನಿರಂತರ ನಿಯೋಜನೆ (CI/CD) ಪೈಪ್ಲೈನ್ಗೆ ಕಾರ್ಯಕ್ಷಮತೆ ಪರೀಕ್ಷೆಯನ್ನು ಸಂಯೋಜಿಸಿ. ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಲೈಟ್ಹೌಸ್ CI ನಂತಹ ಪರಿಕರಗಳನ್ನು ಬಳಸಬಹುದು.
- ಕಾರ್ಯಕ್ಷಮತೆ ಬಜೆಟಿಂಗ್: ಪುಟ ಲೋಡ್ ಸಮಯ, ಸಂಪನ್ಮೂಲ ಗಾತ್ರ, ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಸಮಯದಂತಹ ಪ್ರಮುಖ ಮೆಟ್ರಿಕ್ಸ್ಗಳಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆ ಬಜೆಟ್ಗಳನ್ನು ಹೊಂದಿಸಿ. ಈ ಬಜೆಟ್ಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮತ್ತು ಅವು ಮೀರಿದಾಗ ನಿಮಗೆ ಎಚ್ಚರಿಕೆ ನೀಡಲು ಸ್ವಯಂಚಾಲಿತ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಕ್ರೋಮ್, ಫೈರ್ಫಾಕ್ಸ್, ಸಫಾರಿ, ಮತ್ತು ಎಡ್ಜ್ ಸೇರಿದಂತೆ ಆಧುನಿಕ ವೆಬ್ ಬ್ರೌಸರ್ಗಳಿಂದ ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ವಿವಿಧ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ API ಯ ಅನುಷ್ಠಾನ ಮತ್ತು ನಡವಳಿಕೆಯಲ್ಲಿ ಕೆಲವು ವ್ಯತ್ಯಾಸಗಳಿರಬಹುದು.
ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ವಿವಿಧ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸುವುದು ಮತ್ತು API ಬೆಂಬಲಿಸದಿದ್ದರೆ ಕಾರ್ಯವನ್ನು ಆಕರ್ಷಕವಾಗಿ ಡಿಗ್ರೇಡ್ ಮಾಡಲು ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್ ಬಳಸುವುದು ಮುಖ್ಯವಾಗಿದೆ. `modernizr` ನಂತಹ ಲೈಬ್ರರಿಗಳು ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್ಗೆ ಸಹಾಯ ಮಾಡಬಹುದು.
ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಅನ್ನು ಬಳಸಲು ಕೆಲವು ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:
- ನೈಜ-ಸಮಯದ ಮಾನಿಟರಿಂಗ್ಗಾಗಿ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ಗಳನ್ನು ಬಳಸಿ: ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ಗಳು ಟೈಮ್ಲೈನ್ ಅನ್ನು ಪದೇ ಪದೇ ಪೋಲ್ ಮಾಡುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ರೀತಿಯಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಒದಗಿಸುತ್ತವೆ.
- ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುವ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರಭಾವದ ಬಗ್ಗೆ ಜಾಗರೂಕರಾಗಿರಿ: ಹೆಚ್ಚು ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುವುದು ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು. ನಿಮಗೆ ಬೇಕಾದ ಡೇಟಾವನ್ನು ಮಾತ್ರ ಸಂಗ್ರಹಿಸಿ ಮತ್ತು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಕಾಲ್ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ನಲ್ಲಿ ದುಬಾರಿ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಿ.
- ಮಾರ್ಕ್ಗಳು ಮತ್ತು ಮೆಷರ್ಗಳಿಗಾಗಿ ಅರ್ಥಪೂರ್ಣ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ಇದು ಡೇಟಾವನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
- ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ವಿವಿಧ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ವಿವಿಧ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸುವ ಮೂಲಕ ಮತ್ತು ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್ ಬಳಸುವ ಮೂಲಕ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಇತರ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ: ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಸಮಸ್ಯೆಗಳನ್ನು ಅಳೆಯಲು ಮತ್ತು ಗುರುತಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಸಮಗ್ರ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆಗಳಿಗಾಗಿ ಇದನ್ನು ಸ್ಥಾಪಿತ ವೆಬ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳೊಂದಿಗೆ (ಚಿತ್ರ ಆಪ್ಟಿಮೈಸೇಶನ್, ಮಿನಿಫಿಕೇಶನ್, CDN ಬಳಕೆ) ಸಂಯೋಜಿಸಿ ಬಳಸಿ.
ತೀರ್ಮಾನ
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ವೆಬ್ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯಲು ಮತ್ತು ವಿಶ್ಲೇಷಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ. API ಯ ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಇಂಟರ್ಫೇಸ್ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಮೌಲ್ಯಯುತವಾದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ಸ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸಬಹುದು ಮತ್ತು ಅವುಗಳನ್ನು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಆಪ್ಟಿಮೈಸೇಶನ್ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಬಳಸಬಹುದು. ವೆಬ್ ವೈಟಲ್ಸ್ ಮೇಲೆ ಗಮನಹರಿಸುವ ಮೂಲಕ ಮತ್ತು RUM ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ಕಾರ್ಯಕ್ಷಮತೆ ಪರೀಕ್ಷೆಯಂತಹ ಮುಂದುವರಿದ ತಂತ್ರಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೂಲಕ, ನೀವು ವೇಗವಾದ, ಸುಗಮ, ಮತ್ತು ಹೆಚ್ಚು ಆನಂದದಾಯಕ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ನೀಡಬಹುದು. ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್ಲೈನ್ API ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಮತ್ತು ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಕೆಲಸದ ಹರಿವಿನಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ವಿಶ್ಲೇಷಣೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು ಇಂದಿನ ಕಾರ್ಯಕ್ಷಮತೆ-ಚಾಲಿತ ವೆಬ್ ಪರಿಸರದಲ್ಲಿ ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಬಳಕೆದಾರರ ತೃಪ್ತಿಯಲ್ಲಿ ಗಮನಾರ್ಹ ಸುಧಾರಣೆಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.